var list = document.querySelector('#bannerlist');
var liHeight = 0;
var itemCount = 3;
function init() {
  for (var i = 0; i < itemCount; i++) {
    var li = document.createElement('li');
    li.className = 'item';
    li.innerText = '我是第' + i + '项';
    list.appendChild(li);
  }

  var firstItem = list.children[0].cloneNode(true);
  list.appendChild(firstItem);

  liHeight = firstItem.offsetHeight;

  startScoll(true);
}

var curIndex = 0;
var timerId;
function startScoll(isFist) {
  clearInterval(timerId);

  if (!isFist) {
    curIndex = 0;
    list.style.transition = 'none';
    list.style.marginTop = 0;
  }

  timerId = setInterval(() => {
    curIndex++;
    list.style.transition = 'all .5s linear';
    list.style.marginTop = curIndex * -liHeight + 'px';
    if (curIndex === itemCount + 1) {
      curIndex = 0;
      list.style.transition = 'none';
      list.style.marginTop = 0;
      startScoll(false);
    }
  }, 1000);
}

init();
